<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/webpage/include/taglib.jsp"%>
<html>
<head>
	<title>商品(大)管理</title>
	<meta name="decorator" content="ani"/>
	<link rel="stylesheet" href="${ctxStatic}/plugin/layui-2.1.5/css/layui.css" media="all">
	<script type="text/javascript">

        /**
		 * 还缺少进入编辑页面自动选择已选择分类。
         */
		$(document).ready(function() {

			getSelect();

			$("#inputForm").validate({
				submitHandler: function(form){

				    if ($("#belongToCategory").val() == "" || $("#belongToCategory").val() == undefined || typeof ($("#belongToCategory").val()) == "undefined"){
                        top.layer.alert('请至少选择一个分类!', {icon: 0, title:'警告'});
                        return ;
					}
				    if ($("#belongSonCategory").val() == "" || $("#belongSonCategory").val() == undefined || typeof ($("#belongSonCategory").val()) == "undefined"){
                        top.layer.alert('请至少选择一个具体分类!', {icon: 0, title:'警告'});
                        return ;
					}
				    if ($("#belongToCompany").val() == "" || $("#belongToCompany").val() == undefined || typeof ($("#belongToCompany").val()) == "undefined"){
                        top.layer.alert('请至少选择一个品牌分类!', {icon: 0, title:'警告'});
                        return ;
					}
				    if ($("#belongSonCompany").val() == "" || $("#belongSonCompany").val() == undefined || typeof ($("#belongSonCompany").val()) == "undefined"){
                        top.layer.alert('请至少选择一个品牌子分类!', {icon: 0, title:'警告'});
                        return ;
					}

					$("#bigCategoryId").val($("#belongToCategory").val());
					$("#categoryId").val($("#belongSonCategory").val());
					$("#companyBigCategoryId").val($("#belongToCompany").val());
					$("#companyCategoryId").val($("#belongSonCompany").val());

                    // console.log($("#bigCategoryId").val());
                    // console.log($("#categoryId").val());
                    // console.log($("#companyBigCategoryId").val());
                    // console.log($("#companyCategoryId").val());
                    // return;

					jp.loading();
					form.submit();
				},
				errorContainer: "#messageBox",
				errorPlacement: function(error, element) {
					$("#messageBox").text("输入有误，请先更正。");
					if (element.is(":checkbox")||element.is(":radio")||element.parent().is(".input-append")){
						error.appendTo(element.parent().parent());
					} else {
						error.insertAfter(element);
					}
				}
			});
			
		});

        function getSelect() {
            var belongCategoryHtml = "";
            var belongCompanyHtml = "";
            $.ajax({
                url: "${ctx}/anny/prodcuct/productCategory/categoryData",
                type: "POST",
                dataType: "json",
                success: function(result) {
					// console.log(result.data);
                    belongCategoryHtml += "<div class=\"col-xs-12 col-sm-6 col-md-4\" style=\"width: 100%;display: flex;align-items: center;\">";
                    belongCategoryHtml += "<select id=\"belongToCategory\" name=\"belongCategory\" class=\"form-control valid\" style=\"width: 50%;\" onchange=\"getCategorySonSelect(this.value)\" aria-invalid=\"false\">";
                    belongCategoryHtml += "<option value=\"\">请选择分类</option>";
                    belongCompanyHtml += "<div class=\"col-xs-12 col-sm-6 col-md-4\" style=\"width: 100%;display: flex;align-items: center;\">";
                    belongCompanyHtml += "<select id=\"belongToCompany\" name=\"belongCompany\" class=\"form-control  valid\" style=\"width: 50%;\" onchange=\"getCompanySonSelect(this.value)\" aria-invalid=\"false\">";
                    belongCompanyHtml += "<option value=\"\">请选择分类</option>";
                    if(result.data != null && "" != result.data){
	                    for (var i = 0; i < result.data.length; i++) {
							if (result.data[i].type == "1"){
								if($("input[name='bigCategoryId']").val() == result.data[i].id){
									belongCategoryHtml += "<option selected='selected' value=\""+result.data[i].id+"\">"+result.data[i].name+"</option>";
								}else{
		                            belongCategoryHtml += "<option value=\""+result.data[i].id+"\">"+result.data[i].name+"</option>";
								}
							}else {
								if($("input[name='companyBigCategoryId']").val() == result.data[i].id){
									belongCompanyHtml += "<option selected='selected' value=\""+result.data[i].id+"\">"+result.data[i].name+"</option>";
								}else{
	                           		belongCompanyHtml += "<option value=\""+result.data[i].id+"\">"+result.data[i].name+"</option>";
								}
							}
	                    }
                    }
                    belongCategoryHtml += "</select><select id=\"belongSonCategory\" name=\"belongSonCategory\" class=\"form-control valid\" style=\"width: 50%;\" aria-invalid=\"false\"><option value=\"\">请选择分类</option></select></div>";
                    belongCompanyHtml += "</select><select id=\"belongSonCompany\" name=\"belongSonCompany\" class=\"form-control valid\" style=\"width: 50%;\" aria-invalid=\"false\"><option value=\"\">请选择分类</option></select></div>";
                    // console.log(belongCategoryHtml.length);
                    // console.log(belongCompanyHtml.length);
                    if(belongCategoryHtml.length == 470){
                        belongCategoryHtml = "所属分类未配置";
                        console.log(belongCategoryHtml);
                    }
                    if(belongCompanyHtml.length == 466){
                        belongCompanyHtml = "所属分类未配置";
                        console.log(belongCompanyHtml);
                    }
                   	$("#belongCategory").append(belongCategoryHtml);
                   	$("#belongCompany").append(belongCompanyHtml);
		          	//选中当前商品分类和品牌
		          	if("" != $("input[name='bigCategoryId']").val() && null != $("input[name='bigCategoryId']").val()){
		           		getCategorySonSelect($("input[name='bigCategoryId']").val());
		          	}
		          	if("" != $("input[name='companyBigCategoryId']").val() && null != $("input[name='companyBigCategoryId']").val()){
		           		getCompanySonSelect($("input[name='companyBigCategoryId']").val());
		          	}
                }
            });
        }

		function getCategorySonSelect(parentId) {
			$("#belongSonCategory").empty();
// 			console.log(parentId);
			console.log($("input[name='companyCategoryId']").val());
			if (parentId == '' || parentId == null || parentId.length == 0){
                top.layer.alert('请至少选择一个分类!', {icon: 0, title:'警告'});
                return ;
			}
            $.ajax({
                url: "${ctx}/anny/prodcuct/productCategory/categorySonData?parentId="+parentId,
                type: "POST",
                dataType: "json",
                success: function(result) {
                    // console.log(result.data);
					var categoryHtml = "<option value=\"\">请选择分类</option>";
                    for (var i = 0; i < result.data.length; i++) {
                    	if($("input[name='categoryId']").val() == result.data[i].id){
                    		categoryHtml += "<option selected='selected' value=\""+result.data[i].id+"\" sel>"+result.data[i].name+"</option>";
                    	}else{
                        	categoryHtml += "<option value=\""+result.data[i].id+"\">"+result.data[i].name+"</option>";
                    	}
                    }
					// console.log($("#belongSonCategory").html());
					$("#belongSonCategory").html(categoryHtml);
                }
            });
        }

        function getCompanySonSelect(parentId) {
//             console.log(parentId);
			$("#belongSonCompany").empty();
            if (parentId == '' || parentId == null || parentId.length == 0){
                top.layer.alert('请至少选择一个分类!', {icon: 0, title:'警告'});
                return ;
            }
            $.ajax({
                url: "${ctx}/anny/prodcuct/productCategory/categorySonData?parentId="+parentId,
                type: "POST",
                dataType: "json",
                success: function(result) {
//                     console.log(result.data);
//                     console.log($("input[name='companyCategoryId']").val());
                    var categoryHtml = "<option value=\"\">请选择分类</option>";
                    for (var i = 0; i < result.data.length; i++) {
                    	if($("input[name='companyCategoryId']").val() == result.data[i].id){
                    		categoryHtml += "<option selected='selected' value=\""+result.data[i].id+"\">"+result.data[i].name+"</option>";
                    	}else{
	                        categoryHtml += "<option value=\""+result.data[i].id+"\">"+result.data[i].name+"</option>";
                    	}
                    }
                    // console.log($("#belongSonCompany").html());
                    $("#belongSonCompany").html(categoryHtml);
                }
            });
        }
	</script>
</head>
<body>
<div class="wrapper wrapper-content">				
<div class="row">
	<div class="col-md-12">
	<div class="panel panel-primary">
		<div class="panel-heading">
			<h3 class="panel-title"> 
				<a class="panelButton" href="${ctx}/anny/prodcuct/productCommodity"><i class="ti-angle-left"></i> 返回</a>
			</h3>
		</div>
		<div class="panel-body">
		<form:form id="inputForm" modelAttribute="productCommodity" action="${ctx}/anny/prodcuct/productCommodity/save" method="post" class="form-horizontal">
		<form:hidden path="id"/>
		<form:hidden path="bigCategoryId" id="bigCategoryId"/>
		<form:hidden path="categoryId" id="categoryId"/>
		<form:hidden path="companyBigCategoryId" id="companyBigCategoryId"/>
		<form:hidden path="companyCategoryId" id="companyCategoryId"/>
		<sys:message content="${message}"/>
			<table class="layui-table" >
				<colgroup>
					<col width="18%">
					<col width="32%">
					<col width="18%">
					<col width="32%">
				</colgroup>
				<tbody>
				<tr>
					<th><font color="red">*</font>名称：</th>
					<td><form:input path="name" htmlEscape="false"  id="name"   class="form-control required"/></td>
					<th><font color="red">*</font>是否为新款：</th>
					<td>
						<form:select path="newFlag" class="form-control required">
							<form:option value="" label=""/>
							<form:options items="${fns:getDictList('anny_product_new_flag')}" itemLabel="label" itemValue="value" htmlEscape="false"/>
						</form:select>
					</td>
				</tr>
				<tr>
					<th><font color="red">*</font>是否上架：</th>
					<td>
						<form:select path="obtainFlag" class="form-control required">
							<form:option value="" label=""/>
							<form:options items="${fns:getDictList('anny_product_obtained_flag')}" itemLabel="label" itemValue="value" htmlEscape="false"/>
						</form:select>
					</td>
					<th><font color="red">*</font>是否积分可购买：</th>
					<td>
						<form:select path="evaluateFlag" class="form-control required">
							<form:option value="" label=""/>
							<form:options items="${fns:getDictList('anny_product_evaluate_flag')}" itemLabel="label" itemValue="value" htmlEscape="false"/>
						</form:select>
					</td>
				</tr>
				<tr>
					<th><font color="red">*</font>是否热销：</th>
					<td>
						<form:select path="hotFlag" class="form-control required">
							<form:option value="" label=""/>
							<form:options items="${fns:getDictList('anny_product_hot_flag')}" itemLabel="label" itemValue="value" htmlEscape="false"/>
						</form:select>
					</td>
					<th><font color="red">*</font>是否为官方商品：</th>
					<td>
						<form:select path="officalFlag" class="form-control required">
							<form:option value="" label=""/>
							<form:options items="${fns:getDictList('anny_offical_flag')}" itemLabel="label" itemValue="value" htmlEscape="false"/>
						</form:select>
					</td>
				</tr>
				<tr>
					<th><font color="red">*</font>金卡标识：</th>
					<td>
						<form:select path="goldenFlag" class="form-control required">
							<form:option value="" label=""/>
							<form:options items="${fns:getDictList('anny_product_golden_flag')}" itemLabel="label" itemValue="value" htmlEscape="false"/>
						</form:select>
					</td>
				</tr>
				<tr>
					<th>所属分类：</th>
					<td id="belongCategory">

					</td>
					<th>所属品牌：</th>
					<td id="belongCompany">

					</td>
				</tr>
				<tr>
					<th><font color="red">*</font>商品最高价：</th>
					<td>
						<form:input path="highPrice" htmlEscape="false"    class="form-control required"/>
					</td>
					<th><font color="red">*</font>商品最低价：</th>
					<td>
						<form:input path="lowPrice" htmlEscape="false"    class="form-control required"/>
					</td>
				</tr>
				<tr>
					<th>备注信息：</th>
					<td colspan="3"><form:textarea path="remarks" htmlEscape="false"  id="remarks"  rows="4"      class="form-control "/></td>
				</tr>
				<tr>
					<th>描述：</th>
					<td colspan="3"><form:textarea path="description" htmlEscape="false"  id="description"  rows="4"      class="form-control"/></td>
				</tr>
				</tbody>
			</table>
		<c:if test="${fns:hasPermission('anny:prodcuct:productCommodity:edit') || isAdd}">
				<div class="col-lg-3"></div>
		        <div class="col-lg-6">
		             <div class="form-group text-center">
		                 <div>
		                     <button class="btn btn-primary btn-block btn-lg btn-parsley" data-loading-text="正在提交...">提 交</button>
		                 </div>
		             </div>
		        </div>
		</c:if>
		</form:form>
		</div>				
	</div>
	</div>
</div>
</div>
</body>
</html>